<template>
  <view class="search">
    <view class="search-bar">
      <view class="search-content">
        <input class="search-input" v-model="keyword" type="text" placeholder="请输入学校名或美食名" @change="handleInputChange">
		<view
          class="search-input-clear icon iconqingkong"
          v-show="keyword !== ''"
          @click="handleCancel"
        >
	    </view>
        <button @click="handleSearch" size="mini">搜索</button>
      </view>
    </view>
    <view v-if="isHistory" class="search-history">
      <view class="label-box">
        <view class="label-header">
          <text class="label-title">搜索历史</text>
          <text class="label-clear" @click="handleClear">清空</text>
        </view>
        <view v-if="history.length !== 0" class="label-content">
          <view
            class="label-content-item"
            v-for="(item,index) in history"
            :key="index"
            @click="handleLabelClick(item)"
          >
            {{item}}
          </view>
        </view>
        <view v-else class="no-data">暂无搜索历史</view>
      </view>
    </view>
    <view v-else class="search-info">
      <!-- 如果搜索学校，显示学校top30的美食 -->
      <!-- 如果搜索美食，显示距离近+评分高的top30美食 -->
      <view class="search-info-item" v-for="(item, index) in showData" :key="index">
          <food-card :item="item"></food-card>
      </view>
        <view v-show="isLoadMore">
          <uni-load-more :status="loadStatus" :contentText="contentText"></uni-load-more>
        </view>
    </view>
  </view>
</template>

<script>
import {mapState} from 'vuex'
import FoodCard from '@/components/FoodCard'
import {searchFood} from '../../api/food.js'
import {uniSearchBar, uniPagination, uniLoadMore} from '@dcloudio/uni-ui'
export default {
  name: 'search',
  components: {
    FoodCard, uniSearchBar, uniPagination, uniLoadMore
  },
  data() {
    return {
      keyword: '', // 关键词
      showData: [], // 展示的数据
      total: 0,
      pageQuery: {
        pageNum: 1,
        pageSize: 10
      },
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了"
      },
      isHistory: true, // 是否显示历史记录框
      nodata: false, // 是否有数据
      loadStatus:'loading',  //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      isLoadMore:false,  //是否加载中
    }
  },
  computed: {
    ...mapState(['history'])
  },
  //触底加载更多
  onReachBottom(e) {
    if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
      this.isLoadMore=true
      this.pageQuery.pageNum+=1
      this.searchFood()
    }
  },
  methods: {
    searchFood() {
      const data = {
        foodFilter: this.keyword,
        pageNum: this.pageQuery.pageNum,
        pageSize: this.pageQuery.pageSize
      }
      return searchFood(data).then(res => {
        if (res.code === 200) {
          console.log(res)
          if (res.data.list.length !== 0) {
            this.showData = this.showData.concat(res.data.list)
            this.isLoadMore=false
            return this.showData
          } else {
              this.isLoadMore=true
              this.loadStatus='noMore'
          }
        } else {
          uni.showToast({
            title: res.message,
            duration: 2000,
            icon: 'none'
          });
          return []
        }
      })
    },
    handleCancel(val) {
      this.keyword = ''
      this.showData = []
      this.isHistory = true
      this.nodata = false
    },
    handleInput(val) {
      this.keyword = val.value
    },
    async handleSearch() {
      let val = this.keyword
      if (val !== '') {
        this.$store.dispatch('setHistory', this.keyword)
      }
      this.isHistory = false
      const data = await this.searchFood();
      if (!data || data.length === 0) {
        this.nodata = true
      }
    },
    handleClear() {
      this.$store.dispatch('clearHistory')
    },
    handleLabelClick(val) {
      this.keyword = val
    },
    handleInputChange(val) {
      if(this.keyword === '') {
        this.showData = []
        this.isHistory = true
      }
    },
	handlePageChange(val) {
		this.pageQuery.pageNum = val.current
		this.searchFood()
	}
  }
}
</script>

<style lang='scss'>
  .search {
    margin-top: 10px;
    height: 100%;
    .search-bar {
      height: 50px;
      background-color: $theme-color;
      .search-content {
        position: relative;
        .search-input {
			padding: 0 20rpx;
          position: absolute;
          left: 40%;
          transform: translateX(-50%);
          top: 10px;
          width: 70%;
          height: 30px;
          background-color: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 20px;
        }
        .search-input-clear {
          position: absolute;
          width: 17px;
          height: 17px;
          top: 17px;
          left: 500rpx;
        }
        button {
          position: absolute;
          height: 30px;
          top: 10px;
          right: 15px;
          width: 60px;
          font-size: 14px;
          text-align: center;
          line-height: 30px;
          &::after {
            outline: none;
            border: none;
          }
        }
      }
    }
    .search-history {
      display: flex;
      flex-direction: column;
      flex: 1;
      .label-box {
        background-color: #ffffff;
        margin-bottom: 10px;
        .label-header {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          color: #666666;
          padding: 10px 15px;
          border-bottom: 1px #f5f5f5 solid;
          .label-title {
            color: $theme-color;
          }
          .label-clear {
            color: #666666;
            font-weight: bold;
          }
        }
        .label-content {
          display: flex;
          flex-wrap: wrap;
          padding: 15px;
          padding-top: 0;
          .label-content-item {
            padding: 2px 10px;
            margin-top: 12px;
            margin-right: 10px;
            border-radius: 5px;
            border: 1px solid #666666;
            font-size: 14px;
            color: #666666;
          }
        }
        .no-data {
          height: 100px;
          line-height: 100px;
          width: 100%;
          text-align: center;
          font-size: 14px;
          color: #666666;
        }
      }
    }
    .search-info {
      height: 100%;
    }
  }
	/* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */
</style>